<template>
  <transition name="confirm-fade">
    <!-- click.stop 防止点击事件向上冒泡 -->
    <div v-show="showFlag" class="confirm" @click.stop>
      <div class="confirm-wrapper">
        <div class="confirm-content">
          <p class="text">{{ text }}</p>
          <div class="operate">
            <div class="operate-btn-left" @click="cancel">{{ cancelBtnText }}</div>
            <div class="operate-btn-right" @click="confirm">{{ confirmBtnText }}</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    text: {
      type: String,
      default: '是否确认删除?'
    },
    cancelBtnText: {
      type: String,
      default: '取消'
    },
    confirmBtnText: {
      type: String,
      default: '确定'
    }
  },
  data () {
    return {
      showFlag: false
    }
  },
  methods: {
    hide () {
      this.showFlag = false
    },
    show () {
      this.showFlag = true
    },
    cancel () {
      this.hide()
      this.$emit('cancel')
    },
    confirm () {
      this.hide()
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
  .confirm {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    background-color: rgba(0, 0, 0, 0.4);

    &.confirm-fade-enter-active {
      animation: confirm-fadein 0.4s;
    }

    .confirm-content {
      animation: confirm-zoom 0.4s;
    }

    .confirm-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      width: 80%;
      z-index: 900;

      .confirm-content {
        // width 100%;
        background-color: #333;
        border-radius: 6px;

        .text {
          line-height: 60px;
          text-align: center;
          color: rgba(255, 255, 255, 0.5);
          border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        }

        .operate {
          display: flex;
          color: rgba(255, 255, 255, 0.5);

          .operate-btn-left {
            flex: 1;
            text-align: center;
            line-height: 40px;
            border-right: 1px solid rgba(0, 0, 0, 0.3);
          }

          .operate-btn-right {
            flex: 1;
            text-align: center;
            line-height: 40px;
          }
        }
      }
    }
  }

  @keyframes confirm-fadein {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes confirm-zoom {
    0% {
      transform: scale(0);
    }

    50% {
      transform: scale(1.4);
    }

    100% {
      transform: scale(1);
    }
  }
</style>
